<template>
    <div class="banner" style="z-index:3">
        <div class="swiper-container" id="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../../assets/img/a1.jpg" style="width:1280px;height:500px">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/a2.jpg" style="width:1280px;height:500px">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/a3.jpg" style="width:1280px;height:500px">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/a4.jpg" style="width:1280px;height:500px">
            </div>
            <div class="swiper-slide">
                <img src="../../assets/img/a5.jpg" style="width:1280px;height:500px">
            </div>
        </div>
        
        </div>
    </div>
    
</template>

<script>
    import Swiper from "swiper"
    export default {
        name:'banner',
        mounted() {
            var mySwiper = new Swiper('.swiper-container', {
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                autoplay: { 
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                });
                mySwiper.el.onmouseover = function(){ 
                mySwiper.autoplay.stop();
                }
                mySwiper.el.onmouseleave = function(){
                mySwiper.autoplay.start();
                }
        },
    }
</script>

<style>
    .banner{
        
    } 
</style>